<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="学科" size="small">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                @change="seachTags(form.subjectID)"
                size="small"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in subjects"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="二级目录" size="small">
              <el-select v-model="form.directory" size="small">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in directorys"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="标签" size="small">
              <el-select v-model="form.tags" placeholder="请选择" size="small">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in tags"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="关键字" size="small">
              <el-input
                size="small"
                placeholder="根据题干搜索"
                v-model="form.keyword"
              ></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="试题类型" size="small">
              <el-select v-model="form.questionType" size="small">
                <el-option
                  v-for="item in questionTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="难度" size="small">
              <el-select v-model="form.difficulty" size="small">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in difficulties"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="方向" size="small">
              <el-select v-model="form.direction" size="small">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in directions"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="录入人" size="small">
              <el-select v-model="form.creatorID" size="small">
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="item in users"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="题目备注" size="small">
              <el-input size="small" v-model="form.remarks"></el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="企业简称" size="small">
              <el-input size="small" v-model="form.shortName"></el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <el-form-item label="城市" size="small">
              <div class="area">
                <el-select
                  size="small"
                  v-model="form.province"
                  @change="searchArea"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in provinces"
                    :key="item"
                  ></el-option>
                </el-select>
                <el-select v-model="form.city" size="small">
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in citys"
                    :key="item"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content">
            <div class="btn">
              <el-button size="small" @click="resetForm('form')"
                >清除</el-button
              >
              <el-button
                size="small"
                type="primary"
                @click="search(form.page, form.pagesize)"
                >搜索</el-button
              >
            </div>
          </div></el-col
        >
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { simple as subjectSimple } from '@/api/hmmm/subjects.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as usersSimple } from '@/api/base/users.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { list, choice } from '@/api/hmmm/questions.js'

export default {
  name: 'SubjectsSearch',
  data () {
    return {
      // 表单项
      form: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        dificulty: null,
        questionType: null,
        tags: null,
        province: null,
        directory: null,
        city: null,
        keywords: null,
        remarks: null,
        shortName: null,
        drection: null,
        creatorID: null,
        catalogID: null
      },
      subjects: [],
      tags: [],
      directorys: [],
      difficulties: difficulty,
      questionTypes: questionType,
      directions: direction,
      users: [],
      citys: []
    }
  },
  props: {
    // 判断是否为精选
    type: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.getStartData()
    this.search()
  },
  computed: {
    provinces () {
      return provinces()
    }
  },
  methods: {
    // 获取页面初始数据
    async getStartData () {
      // 获取学科
      const res = await subjectSimple()
      this.subjects = res.data
      // 获取录入人
      const res2 = await usersSimple()
      this.users = res2.data
    },
    // 获取标签与二级目录
    async seachTags (id) {
      this.tags = []
      this.directorys = []
      this.form.tags = null
      this.form.directory = null
      const res = await tagsSimple({ subjectID: id })
      //
      this.tags = res.data
      const res2 = await directorysSimple({ subjectID: id })
      this.directorys = res2.data
    },
    // 获取城市区域
    async searchArea () {
      this.citys = []
      this.form.city = null
      this.citys = citys(this.form.province)
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.form = this.$options.data().form
    },
    // 搜索
    async search (page, size, chkState) {
      //
      if (page) this.form.page = page
      if (size) this.form.pagesize = size
      if (this.type === 0) {
        const res = await list(this.form)
        this.$emit('search', res.data)
      } else {
        if (chkState) {
          this.form.chkState = chkState
        } else {
          this.form.chkState = null
        }
        const res = await choice(this.form)
        this.$emit('search', res.data)
      }
    }
  }
}
</script>
<style lang='scss'  scoped>
.el-form {
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-form-item {
    width: 100%;
    .area {
      display: flex;
      .el-select:first-child {
        margin-right: 10px;
      }
    }
    .el-select {
      width: 100%;
    }
  }
  .el-col {
    margin-bottom: 18px;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
